<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.4.1.min.js"></script>
    <style>
        .test{
            width: 200px;
            height: 200px;
            background-color: crimson;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            /* background-image: url(img//Chrysanthemum.jpg);
            background-repeat: no-repeat;
            background-position: left;
            background-origin: border-box; */
        }
        @media screen and(max-width: 300px) {
            .text{
                background-color: red;
            }
        }
    </style>
</head>
<body>

    <button class="btn_1">测试1</button>
    <button class="btn_2">测试2</button>
    <button class="btn_3">测试3</button>
    <button class="btn_4">测试4</button>

    

    <div class="test">
        A、@media 查询，你可以针对不同的媒体类型定义不同的样式
B、@media 可以设计响应式页面
C、当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
D、可以用media属性在link中使用

13、文字溢出显示省略号应该拥有那些属性（  ACDB     ）		
A、overflow: hidden;           B、white-space: nowrap;
C、text-overflow: ellipsis;       D、width:500px

14、关于语义化说法不正确的是（   A BD    ）	ABC	
A、语义化的HTML有利于机器的阅读
B、Table 属于过时的标签，遇到数据列表时，需尽量使用 div 来模拟表格
C、语义化是HTML5带来的新概念，此前版本的HTML无法做到语义化
D、Header、article、address都属于语义化明确的标签

15、background-origin的值有哪些（  BCD     ）		
A、none    B、border-box    C、content-box    D、padding-box

    </div>


   <script type="text/javascript">
		$(function(){
            $(".btn_1").click(function (e) {
                $(".test").css("background-color","blue").animate({
                    width:'400px',
                    height:'400px'
                })
            })
            $(".btn_2").click(function () {
                $(".test")
            })
            $(".btn_3").click(function () {
                $(".test")
            })
            $(".btn_4").click(function () {
                $(".test")
            })
		})
	</script>
</body>
</html>